﻿@page "/progress-bar/stripes"
@using Syncfusion.Blazor.ProgressBar
@inject NavigationManager Navigation
@using Syncfusion.Blazor
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample illustrates a striped linear progress bar with animation.</p>
</SampleDescription>
<ActionDescription>
    <p>This demo for Blazor Progress Bar control shows the linear striped progress bar with help of IsStriped property.</p>
</ActionDescription>

<div class="control-section">
    <div class="row linear-parent">
        <div class="linear-progress">
            <SfProgressBar @ref="ProObj1" Type="ProgressType.Linear" ID="Danger"
                           Height="30" Width="100%"
                           Value="20" Minimum="0" Maximum="100"
                           IsStriped="true"
                           TrackThickness="20"
                           ProgressThickness="20"
                           Role="ModeType.Success"
                           Theme="@CurrentTheme"
                           TrackColor="@ColorTrack">
                <ProgressBarAnimation Enable="@EnableAnimation" Duration="2000" Delay="0" />
            </SfProgressBar>
        </div>
        <div class="linear-progress">
            <SfProgressBar @ref="ProObj2" Type="ProgressType.Linear" ID="Warning"
                           Height="30" Width="100%"
                           Value="40" Minimum="0" Maximum="100"
                           IsStriped="true"
                           TrackThickness="20"
                           ProgressThickness="20"
                           Role="ModeType.Info"
                           Theme="@CurrentTheme"
                           TrackColor="@ColorTrack">
                <ProgressBarAnimation Enable="@EnableAnimation" Duration="2000" Delay="0" />
            </SfProgressBar>
        </div>
        <div class="linear-progress">
            <SfProgressBar @ref="ProObj3" Type="ProgressType.Linear" ID="Info"
                           Height="30" Width="100%"
                           Value="70" Minimum="0" Maximum="100"
                           IsStriped="true"
                           TrackThickness="20"
                           ProgressThickness="20"
                           Role="ModeType.Warning"
                           Theme="@CurrentTheme"
                           TrackColor="@ColorTrack">
                <ProgressBarAnimation Enable="@EnableAnimation" Duration="2000" Delay="0" />
            </SfProgressBar>
        </div>
        <div class="linear-progress">
            <SfProgressBar @ref="ProObj4" Type="ProgressType.Linear" ID="Success"
                           Height="30" Width="100%"
                           Value="100" Minimum="0" Maximum="100"
                           IsStriped="true"
                           TrackThickness="20"
                           ProgressThickness="20"
                           Role="ModeType.Danger"
                           Theme="@CurrentTheme"
                           TrackColor="@ColorTrack">
                <ProgressBarAnimation Enable="@EnableAnimation" Duration="2000" Delay="0" />
            </SfProgressBar>
        </div>
    </div>
    <div class="row linear-button">
        <button id="animation" @onclick="ProgressRefresh" class="e-control e-btn e-lib e-outline e-primary">@AnimationText</button>
    </div>
</div>


@code{
    SfProgressBar ProObj1, ProObj2, ProObj3, ProObj4;
    bool EnableAnimation = true;
    string ColorTrack = null;
    string AnimationText = "Stop Animation";
    public void ProgressRefresh()
    {
        EnableAnimation = !EnableAnimation;
        if (EnableAnimation)
        {
            AnimationText = "Stop Animation";
        }
        else
        {
            AnimationText = "Start Animation";
        }
    }

    string CurrentUri;
    Theme CurrentTheme;

    protected override void OnInitialized()
    {
        CurrentUri = Navigation.Uri;
        if (CurrentUri.IndexOf("material") > -1)
        {
            CurrentTheme = Theme.Material;
            ColorTrack = "#eee";
        }
        else if (CurrentUri.IndexOf("fabric") > -1)
        {
            CurrentTheme = Theme.Fabric;
        }
        else if (CurrentUri.IndexOf("bootstrap4") > -1)
        {
            CurrentTheme = Theme.Bootstrap4;
        }
        else if (CurrentUri.IndexOf("bootstrap") > -1)
        {
            CurrentTheme = Theme.Bootstrap;
        }
        else if (CurrentUri.IndexOf("highcontrast") > -1)
        {
            CurrentTheme = Theme.HighContrast;
            ColorTrack = "#969696";
        }
        else if (CurrentUri.IndexOf("tailwind") > -1)
        {
            CurrentTheme = Theme.Tailwind;
            ColorTrack = "#E5E7EB";
        }
        else
        {
            CurrentTheme = Theme.Bootstrap4;
        }
    }

}
<style>
    #control-container {
        padding: 0px !important;
    }

    .linear-parent {
        text-align: center;
        margin-top: 2%;
    }

    .linear-button {
        text-align: center;
    }

    .linear-progress {
        width: 80%;
        margin: auto;
        margin-bottom: 3%;
    }

    #animation {
        border-radius: 4px;
        text-transform: capitalize;
    }

    [id$="Lineartrack"] {
        opacity: 1 !important;
    }
</style>